<template>
	<div class="tool-bar-ri h-full">
		<div class="header-icon">
			<el-link type="primary" :href="API_URL" target="_blank" class="m-4"> {{ $t("toolbarright.link") }} </el-link>
			<AssemblySize v-if="false" />
			<Language id="language" v-if="true" />
			<ThemeSetting id="themeSetting" />
			<Message id="message" />
		</div>
		<Avatar />
	</div>
</template>

<script setup lang="ts">
import { API_URL } from "@/config/config";
import Message from "./components/Message.vue";
import Language from "./components/Language.vue";
import ThemeSetting from "./components/ThemeSetting.vue";
import Avatar from "./components/Avatar.vue";
import AssemblySize from "./components/AssemblySize.vue";
</script>

<style scoped lang="scss">
.tool-bar-ri {
	display: flex;
	align-items: center;
	justify-content: center;
	.header-icon {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 22px;
		> div {
			padding: 0 10px;
			:deep(i) {
				font-size: 20px;
				color: #777777;
			}
		}
	}
	.username {
		margin: 0 5px 0 0;
		font-size: 15px;
	}
}
</style>
